<template>
  <div class="v-container">
    <v-header title="我的权益">
      <div class="personal" >
        <!-- <span class="h5-iconfont icon-user" @click="pageTo('personal')"></span> -->
        <!-- <img src="@/assets/images/icon_grzx.png" width="24" alt="个人中心"> -->
      </div>
      <span class="back" @click="goBack()">
        <i class="el-icon-arrow-left"></i>
      </span>
    </v-header>
    <div class="mt">
      <div class="conWrap">

        <div class="con_ele" v-for="(data,index) in dataShow" v-bind:key="index" v-if="data.see">
          <div class="con g-clearfix">
            <img class="e_img" :src="data.img" width="60" :alt="data.h3">
            <div class="c_font">
              <h3 style="margin-top:10px">{{data.h3}}</h3>
              <p>{{data.p}}</p>
              <p>{{data.time1}} &nbsp;{{data.time}}</p>
            </div>
          </div>
        </div>
        <p style="color:#333;margin:8px">尊享权益有效期截止至{{time}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import vHeader from "@/components/Header.vue";
import { Toast } from 'mint-ui';
import { Resource } from '@/services/resource';
import LocalStorage from '@/services/storage';

export default {
  name: "home",
  components: {
    vHeader
  },
  props: {
    title: {
      type: String,
      default: "标题"
    }
  },
  data() {
    return {
      msg: "Footera",
      dataShow:[
        {
          img:require('@/assets/images/h_e01.png'),
          h3:"机场贵宾厅",
          see: false,
          p: "全年无限次",
          time: "",
          time1: ""
        },{
          img:require('@/assets/images/h_e02.png'),
          h3:"高铁贵宾厅",
          see: false,
          p: "全年无限次",
          time: "",
          time1: ""
        },{
          img:require('@/assets/images/h_e03.png'),
          h3:"机场P+R停车",
          p: "全年12天",
          see: false,
          time: "",
          time1: ""
        },{
          img:require('@/assets/images/h_e04.png'),
          h3:"酒后代驾",
          p: "全年12次",
          see: false,
          time: "",
          time1: ""
        },{
          img:require('@/assets/images/h_e05.png'),
          h3:"道路救援",
          see: false,
          p: "全年无限次",
          time: "",
          time1: ""
        },{
          img:require('@/assets/images/h_e06.png'),
          h3:"普通洗车",
          p: "全年12次",
          see: false,
          time: "",
          time1: ""
        }
      ],
      time: ""
    };
  },
  created() {

    this.time = JSON.parse(localStorage.getItem("userInfo")).serviceEndTime.slice(0,11)

    let loginStatus = LocalStorage.getLocalStorage('loginStatus');
    Resource.queryRights
      .post({}, { matrixContent: loginStatus})
      .then(res => {
        if (res.head.resultCode == '000000') {//已发送
          // Toast({
          //   message: '查询用户权益成功',
          //   iconClass: 'el-icon-success'
          // });
          this.dataShow[2].time = `剩余天数：${res.body.pr}`
          this.dataShow[2].time1 = `已使用天数：${12 - res.body.pr}`
          this.dataShow[3].time = `剩余次数：${res.body.dj}`
          this.dataShow[3].time1 = `已使用次数：${12 - res.body.dj}`
          this.dataShow[5].time = `剩余次数：${res.body.xc}`
          this.dataShow[5].time1 = `已使用次数：${12 - res.body.xc}`
          if(res.body.type == 1) {
            this.dataShow[1].see = true
            this.dataShow[2].see = true
            this.dataShow[4].see = true
          } else if(res.body.type == 2) {
            this.dataShow[0].see = true
            this.dataShow[2].see = true
            this.dataShow[4].see = true
          } else if(res.body.type == 3) {
            this.dataShow[1].see = true
            this.dataShow[4].see = true
            this.dataShow[5].see = true
          } else if(res.body.type == 4) {
            this.dataShow[2].see = true
            this.dataShow[4].see = true
            this.dataShow[5].see = true
          } else if(res.body.type == 5) {
            this.dataShow[3].see = true
            this.dataShow[4].see = true
            this.dataShow[5].see = true
          }
        }else{
          Toast({
            message: res.head.resultMsg,
            position: 'middle'
          });
        }
        
        console.log(res);
      })
      .catch(err => {
        console.log(err);
      });
  },
  mounted() {
    this.loginAuto();
  },
  methods:{
    // 返回上一页
    goBack(){
      this.$router.go(-1);
    },
    // 免登录
    loginAuto(){
      let loginStatus = LocalStorage.getLocalStorage('loginStatus');
      if(loginStatus){
        Resource.removeLogin
          .post({}, { matrixContent: loginStatus})
          .then(res => {
            if (res.head.resultCode == 'SUCCESS') {//已发送
              let token = res.head.token;
              LocalStorage.setLocalStorage('token', token, 90 * 24 * 60 * 60 * 1000);
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
      
    }
  }
};
</script>

<style lang="less" scoped>
@import url("./style.less");
</style>